<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="zhouxuan">
    <title>Three.js 切换场景和模型</title>
    <link rel="icon" type="image/png" href="../../images/user_logo.ico">
    <link rel="stylesheet" href="../item1/css_item1/item1.css" />

    <style>
        html,body{width: 100%;height: 100%;overflow: hidden;}
        html, body,div,p,a,img{margin: 0;padding: 0;  }
        body{background:url("../public/mohu.jpg") no-repeat center/cover ;}
        .full-mask{position: absolute;top: 0;left:0;bottom: 0;right:0;background-color: rgba(0,0,0,0.8);z-index: 1000}
        .full-mask p{width: 100%;text-align: center;position: absolute;top: 30%;font-size: 16px;color: #fff;padding: 10px 0;}
        .full-mask p img{width: 120px;margin-top: 15px;}
        @media screen and (min-width:0px)  and (max-width: 600px){
            .full-mask{display: none;}
        }
    </style>

</head>
<body>
<div class="full-mask">
    <p>pc操作方法：按住鼠标左键，移动场景，使中心红点移动到模型上，
        <br />
        <br />
        手机操作方法，旋转手机使中心红点移动到模型上，<br />
        <br />
        5秒后切换场景和模型。<br />
        <img src="../../images/item3_code.png" title="扫描二维码">
    </p>
</div>

<script src="../../lib/webgl/three.js"></script>
<script src="../../lib/webgl/OBJLoader.js"></script>
<script src="../../lib/webgl/OrbitControls.js"></script>
<script src="../../lib/webgl/DeviceOrientationControls.js"></script>
<script src="../../lib/webgl/cardBoardEffect.js"></script>
<script src="../../lib/jquery.min.js"></script>

<script src="js_item3/item3.js"></script>
<script>
    $(".full-mask").on("click touchend",function () {
        $(this).fadeOut(300);
    });
    var fullImg = {
        img1:"../public/full/full_1.jpg",
        img2:"../public/full/full_2.jpg",
        img3:"../public/full/full_3.jpg",
        img4:"../public/full/full_4.jpg",
        img5:"../public/full/full_5.jpg",
        img6:"../public/full/full_6.jpg"
    };
    var modelFile = {
        file1:["../public/model/obj1.obj","../public/texture/obj1.jpg"],
        file2:["../public/model/obj2.obj","../public/texture/obj2.jpg"],
        file3:["../public/model/obj3.obj","../public/texture/obj3.jpg"],
        file4:["../public/model/obj4.obj","../public/texture/obj4.jpg"],
        file5:["../public/model/obj5.obj","../public/texture/obj5.jpg"],
        file6:["../public/model/obj6.obj","../public/texture/obj6.jpg"]
    };
    var SS = new SwitchingScene({
        autoLoad : true,
        autoRotate : true,
        vrMode : false,
        textureBG : fullImg.img1,
        modelOBJ : modelFile.file1[0],
        textureOBJ : modelFile.file1[1],
        switchingMode : true,//允许切换
        SwitchingBG : fullImg,
        SwitchingOBJ : modelFile
    });
</script>
</body>

</html>
